<!-- 左侧栏组件 -->
<template>
  <div class="h-full relative">
    <ElTabs model-value="file" :stretch="true" type="border-card">
      <ElTabPane label="目录" name="file">
        <FileTree></FileTree>
      </ElTabPane>
      <ElTabPane label="大纲" name="nav">
        <NavTree></NavTree>
      </ElTabPane>
    </ElTabs>
  </div>
</template>

<script setup lang="ts">
import { ElTabs, ElTabPane } from "element-plus"

import FileTree from "./components/FileTree/index.vue"
import NavTree from "./components/NavTree/index.vue"
</script>

<style lang="scss" scoped>
.el-tabs--border-card {
  border: 0;
}
:deep(.el-tab-pane) {
  height: calc(100vh - 40px);
  overflow: auto;
}
:deep(.el-tabs__content) {
  padding: 0;
}
</style>
